/**
 * 控制指令和状态指令的展示,纯组件
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Popconfirm, Icon, Checkbox, Radio } from 'antd';

const RadioGroup = Radio.Group;

const styles = {
	name: {
		display: 'inline-block',
		width: '12em'
	},
	m: {
		marginRight: '27px'
	},
	h: {
		marginBottom: '0.5em'
	},
	box: {
		border: '1px solid #ccc',
		borderRadius: '4px',
		marginBottom: '1em'
	},
	icon: {
		fontSize: '16px',
		float: 'right',
		margin: '0 0.4em'
	}
};

export const typeObj = {
	bool: '布尔值',
	enum: '枚举',
	uint8: '数值',
	uint16: '数值',
	uint32: '数值',
	binary: '扩展'
};

class ReportShowItem extends Component {
	render() {
        const { data, mode, point = {}, edit } = this.props;
		return (
			<div style={styles.box}>
				<div style={styles.h} className="table-thead pad1">
					<label>指令名称：</label>
					<span>{data.commandName}</span>
					{
						!mode ?
						<Popconfirm title="确定删除当前上报数据点吗？" onConfirm={this.props.delete} okText="确定" cancelText="取消">
							<Icon type="delete" className="cursor" style={styles.icon} />
						</Popconfirm> : null
					}
					<Icon type="edit" className="cursor" style={styles.icon} onClick={edit} />
				</div>
				<div className="pad1">
					{!mode ? <Checkbox checked={!!data.isShow}>需要展示</Checkbox> : null}
					<div style={styles.h}>
						状态指令数据点:
					</div>
					<div style={styles.h}>
						标识名：{point.identityName}
					</div>
					<div style={styles.h}>
						数据类型：{typeObj[point.dataType]}
					</div>
					<div style={styles.h}>
						指令说明：{point.remark}
					</div>
                    <div style={styles.h}>
                        展示形式：
                        <RadioGroup value={data.showType}>
                            <Radio value={1}>文本</Radio>
                            <Radio value={2}>饼状图</Radio>
                            <Radio value={3}>进度条</Radio>
                        </RadioGroup>
					</div>
				</div>
			</div>
		);
	}
}

ReportShowItem.propTypes = {

};

export default ReportShowItem;